<div class="app-menus">
    <a href="/login">
        <iconify-icon class="icon" icon="mdi:home"></iconify-icon>
        首页
    </a>
    <a href="/login">
        <iconify-icon class="icon" icon="tabler:live-photo"></iconify-icon>
        资源市场
    </a>
    <a href="/login">
        <iconify-icon class="icon" icon="ph:code-fill"></iconify-icon>
        破碎代码
    </a>
    <a href="/login">
        <iconify-icon class="icon" icon="pepicons-pop:map-circle-filled"></iconify-icon>
        生活小圈
    </a>
    <a href="/login">
        <iconify-icon class="icon" icon="teenyicons:mood-laugh-solid"></iconify-icon>
        心情咖啡
    </a>
    <a href="/login">
        <iconify-icon class="icon" icon="medical-icon:laboratory"></iconify-icon>
        核实验室
    </a>
    <a href="/login">
        <iconify-icon class="icon" icon="mage:tag-2-fill"></iconify-icon>
        超级标签
    </a>
    <a href="/login">
        <iconify-icon class="icon" icon="fa-solid:user"></iconify-icon>
        用户中心
    </a>
    <a href="/login">
        <iconify-icon class="icon" icon="icon-park-solid:announcement"></iconify-icon>
        公告中心
    </a>
    <a href="/login">
        <iconify-icon class="icon" icon="fluent-emoji-high-contrast:link"></iconify-icon>
        友情链接
    </a>
    <a href="/login">
        <iconify-icon class="icon" icon="fa-solid:blog"></iconify-icon>
        关于博客
    </a>
    <a href="/login">
        <iconify-icon class="icon" icon="streamline:module-puzzle-1-solid"></iconify-icon>
        UI组件库
    </a>

    <a href="3">
        <iconify-icon class="icon" icon="material-symbols:manage-accounts"></iconify-icon>
    </a>
</div>

<style lang="less">
    .app-menus {
        width: 220px;
        background: #fff;
        padding: 10px;
        height: calc(100vh - 50px);
        overflow-y: scroll;
        position: fixed;
        left: 0;
        top: 50px;
        bottom: 0;
        z-index: 999;
        a {
            display: flex;
            height: 40px;
            line-height: 40px;
            padding: 0 10px;
            align-items: center;
            .icon {
                margin-right: 5px;
            }
            &:hover {
                background: #f5f8fe;
                color: var(--app-theme);
            }
        }
    }
</style>
